<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            <script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-mml-chtml.js"></script>
            {% if remote_plotly_js -%}
            <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
            {% else -%}
            <script type="text/javascript">{% include "plotly.min.js" %}</script>
            {% endif -%}

            <div id="plotly-html-element" hidden></div>
            <img id="plotly-img-element"></img>

            <script type="module">
                const graph_div = document.getElementById("plotly-html-element");
                await Plotly.newPlot(graph_div, {{ plot|tojson|safe }});
                
                const img_element = document.getElementById("plotly-img-element");
                const data_url = await Plotly.toImage(
                    graph_div,
                    {
                        format: "{{ format }}",
                        width: {{ width }},
                        height: {{ height }},
                    }
                );

                img_element.setAttribute("src", data_url);
            </script>
        </div>
    </body>
</html>